<template>
    <el-dialog v-dialogDrag title="角色选择" :visible.sync="openDialog" width="800px" :append-to-body="true" @close="handleClose">
        <div class="user-picker__info">
            <span>已选中: <b>{{selectData.length}}</b> 项目</span>
            <el-button type="text" style="padding:0; margin-left:10px;" @click="handleCancelSelection">取消</el-button>
            <el-button type="primary" class="btn-selection" size="mini" @click="handleConfirmSelection">确认选择</el-button>
        </div>
        <div class="role-picker__container">
            <div class="table-panel">
                <el-table  ref="roleTable" 
                    :data="roleData" 
                    stripe border 
                    style="width: 100%" size="mini" 
                    :height="tableHeight" 
                    :row-key="getRowKeys"
                    :header-cell-class-name="cellClass" 
                    @select="handleSelectionChange"
                    @select-all="handleSelectAll">
                    <el-table-column type="selection" width="40" :reserve-selection="true"></el-table-column>
                    <!-- <el-table-column prop="roleId" label="角色编码" width="200"></el-table-column> -->
                    <el-table-column prop="roleName" label="角色名称" min-width="40%"></el-table-column>
                    <el-table-column prop="remark" label="描述"></el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination 
                        background 
                        :pager-count="5" 
                        :current-page.sync="pageInfo.current" 
                        :page-sizes="pageInfo.size" 
                        :page-size="pageInfo.pagesize" 
                        layout="total, sizes, prev, pager, next" 
                        :total="pageInfo.total" 
                        @size-change="handleSizeChange" 
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import api from "@/api/Process/org.js"
export default {
    name: "RolePicker",
    props: {
        open: {
            type: Boolean,
            default: false
        },
        multi: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            openDialog: this.open,
            tableHeight: "calc(100% - 40px)",
            pageInfo: {
                page: 1,
                pageSize: 10,
                size: [10, 20, 50],
                total: 100
            },
            roleData: [],
            selectData:[]
        }
    },
    computed: {
       
    },
    watch: {

    },
    
    cteated() {

    },
    mounted() {
        this.getRoles()
    },
    methods: {
        getRowKeys(row){
            return row.id
        },
        cellClass(cell){
            if(!this.multi){
                if(cell.columnIndex === 0){
                    return "disable-all-select";
                }
            }
            return "";
        },
        handleSelectAll(val){
            console.log("全选====>",val)
        },
        //自定义事件返回
        // this.$emit("select-complete",null)
        handleSelectionChange(selection,row) {
            if(this.multi){
                this.selectData = selection
            }else{
                if(selection.length>0){
                    this.$refs.roleTable.clearSelection()
                    this.$nextTick(()=>{
                        this.$refs.roleTable.toggleRowSelection(row,true)
                        this.selectData = [row]
                    })
                }
            }
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val
            this.getRoles()
        },
        handleCurrentChange(val) { 
            this.pageInfo.page = val
            this.getRoles()
        },
        handleClose() {
            console.log("关闭RolePicker========>")
            this.$emit("update:open", false)
        },
        handleCancelSelection(){
            this.selectData=[]
            this.$refs.roleTable.clearSelection()
        },
        handleConfirmSelection(){
            if(this.selectData.length==0){
                return this.$message.error("请选择用户")
            }
            this.$emit("select-complete", this.selectData)
            this.handleClose()
        },
        getRoles(){
            api.pageRoles({
                page: this.pageInfo.page,
                limit: this.pageInfo.pageSize
            }).then(res=>{
                if(res.code===10000){
                    this.roleData = res.data.list
                    this.pageInfo.total = res.data.totalCount
                }
                
            })
        }
    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
    padding: 20px;
}
::v-deep .disable-all-select{
    .el-checkbox{
        display: none;
    }
}
.user-picker__info{
    position: relative;
    padding:12px;
    background-color: #dff1ff;
    margin-bottom:10px;
    .btn-selection{
        position: absolute;
        right:10px;
        top:7px;
    }
}

.role-picker__container {
    height: 457px;

    .table-panel {
        height: 100%;
        :deep(.el-table) th.el-table__cell {
            background-color: #f8f8f8;
        }
        .pages {
            height: 40px;
            text-align: right;
            padding-top: 10px;
            .el-pagination {
                padding: 0;
                :deep(.el-pagination__total) {
                    float: left;
                }
            }
        }
    }
}
</style>
